<template>
    <ul class="drugList">
        <li v-for="(drug,index) in drugs" :key="index" class="drug-item">
            <img :src="drug.url" width="200" height="200" class="icon">
            <div class="content">
                <h1 class="name">{{drug.name}}</h1>
                <p class="desc">{{drug.description}}</p>
                <div class="price">￥{{drug.price}}</div>
                <div class="controll-wrapper">
                    <cart-control :drug="drug" @addCount="addCount"></cart-control>
                </div>
            </div>
        </li>
    </ul>
</template>

<script type="text/ecmascript-6">
    import CartControl from "@/components/client/CartControl/CartControl";

    export default {
        props: {
            drugs: {
                type: Array
            }
        },
        components: {
            CartControl
        },
        methods: {
            addCount(x, y) {
                this.$emit('addCount', x, y);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .drugList {
        height 740px
        overflow hidden

        .drug-item {
            display inline-block
            width 500px
            padding 20px
            box-sizing border-box

            &:hover {
                box-shadow 0 0 50px darkgrey
            }

            .icon {
                display inline-block
                vertical-align top
                width 200px
                height 200px
            }

            .content {
                display inline-block
                vertical-align top
                width 260px

                .name {
                    font-size 20px
                    font-weight 700
                    margin 4px 0
                }

                .desc {
                    font-size 12px
                    overflow hidden
                    height 80px
                    line-height 20px
                }

                .price {
                    font-size 14px
                    font-weight 700
                    margin 0 8px
                    color rgb(240, 20, 20)
                }

                .controll-wrapper {
                    padding 10px
                    text-align right
                }
            }
        }
    }
</style>
